<template>
    <div class="follow-container">
            <div v-show="!isFollowed" class="follow" @click="changeFollow">
            <img src="/fengshui/static/pic/icon/follow.png" class="btn-follow">
            <span>关注</span></div>
                <div v-show="isFollowed" class="follow followed" @click="changeFollow">
            <img src="/fengshui/static/pic/icon/followed.png" class="btn-follow">
            <span>已关注</span></div>
    </div>

</template>
<script>
    export default {
        props: ["professorid", "followid", "index"],
        data() {
            return {
                id: null
            }
        },
        watch: {
            followid: function(newValue, oldValue) {
                this.id = this.followid;

            }
        },
        computed: {
            isFollowed: function() {
                return (this.id != null) && !isNaN(this.id);
            }
        },
        mounted() {
            this.id = this.followid;
        },
        methods: {
            changeFollow: function() {
                let vm = this;
                console.log("followed==1");
                let params = {
                    professor_id: vm.professorid,
                    followed: vm.isFollowed ? 1 : 0
                }
                vm.$http.jsonp(vm.url.acid + "&do=follow", {
                    params: params
                }).then(response => {
                    let data = response.body;
                    if (data.status == 'success') {
                        vm.id = data.follow_id;
                        //通知父组件
                        // if (vm.index != null) {
                        vm.$emit("followStatusChange", vm.index, vm.id);
                        // }

                    } else {

                    }
                }, response => {});

            }
        }
    }
</script>
<style>
    .follow-container .follow {
        color: #f85f48;
        font-size: .65rem;
        text-align: center;
        width: 3rem;
    }
    
    .follow-container .followed {
        color: #999;
    }
    
    .follow-container .follow .btn-follow {
        width: .7rem;
        height: .7rem;
        display: block;
        margin: 0 auto;
    }
</style>